<template>
  <div class="app-container">
    <div class="header">
      <el-form ref="form" inline :model="form" size="small">
        <el-form-item label="关键词搜索">
          <el-input v-model="form.name" />
        </el-form-item>
      </el-form>
    </div>
    <div class="main" style="height: 100%; overflow: auto">
      <div class="fixBar" style="margin-bottom: 18px">
        <el-button
          type="primary"
          size="small"
          @click="handleOpenDialog('AddDialog')"
          >新增</el-button
        >
      </div>
      <div class="content">
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >
          <el-table-column align="center" label="ID" width="95">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="标题" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.title }}
            </template>
          </el-table-column>
          <el-table-column label="作者" width="110" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.author }}</span>
            </template>
          </el-table-column>
          <el-table-column label="浏览量" width="110" align="center">
            <template slot-scope="scope">
              {{ scope.row.pageviews }}
            </template>
          </el-table-column>
          <el-table-column
            class-name="status-col"
            label="状态"
            width="110"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag :type="scope.row.status | statusFilter">{{
                scope.row.status
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="created_at"
            label="创建时间"
            width="200"
          >
            <template slot-scope="scope">
              <i class="el-icon-time" />
              <span>{{ scope.row.display_time }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="300">
            <template slot-scope="scope">
              <el-button
                v-for="(item, index) in operateBtns"
                :type="item.type"
                size="small"
                :key="index"
                @click="handleOperateBtnClick(item.name, scope.row)"
                >{{ item.name }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="10"
          background
          style="margin-top: 15px; text-align: right"
        >
        </el-pagination>
      </div>
    </div>
    <component
      v-if="componentId"
      :is="componentId"
      ref="componentRef"
      @close="handleCloseDialog"
    ></component>
  </div>
</template>

<script>
import ViewDialog from "./components/ViewDialog.vue";
import EditDialog from "./components/EditDialog.vue";
import AddDialog from "./components/AddDialog.vue";
import { getList } from "@/api/table";
export default {
  components: {
    ViewDialog,
    EditDialog,
    AddDialog,
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      form: {
        name: "",
      },
      operateBtns: [
        {
          name: "查看",
          type: "primary",
        },
        {
          name: "编辑",
          type: "primary",
        },
        {
          name: "删除",
          type: "danger",
        },
      ],
      tableHeight: 0,
      list: null,
      listLoading: true,
      currentPage: 1,
      componentId: "",
    };
  },
  created() {
    this.fetchData();
  },
  mounted() {},
  methods: {
    fetchData() {
      this.listLoading = true;
      getList().then((response) => {
        this.list = response.data.items;
        this.listLoading = false;
      });
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    // 打开弹窗
    handleOpenDialog(componentId, data = null) {
      this.componentId = componentId;
      this.$nextTick(() => {
        this.$refs.componentRef.handleOpen(data);
      });
    },
    handleCloseDialog() {
      this.componentId = "";
    },
    // 操作
    handleOperateBtnClick(name, data) {
      if (name === "查看") {
        this.handleOpenDialog("ViewDialog", data);
      }
      if (name === "编辑") {
        this.handleOpenDialog("EditDialog", data);
      }
      if (name === "删除") {
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
